<template>
	<view style="width: 100%; padding-right: 70rpx">
		<u-form :model="model" :rules="rules" ref="uForm" :errorType="errorType">
			<u-form-item label="是否为新生儿" prop="payType" label-width="180">
				<u-radio-group
					v-model="radioValue"
					@change="radioGroupChange"
					:width="radioCheckWidth"
					:wrap="radioCheckWrap"
				>
					<u-radio
						shape="circle"
						v-for="(item, index) in radioList"
						:key="index"
						:name="item.id"
						>{{ item.name }}</u-radio
					>
				</u-radio-group>
			</u-form-item>
			<u-form-item
				:leftIconStyle="{ color: '#888', fontSize: '32rpx' }"
				label-width="120"
				label="姓名"
				prop="name"
			>
				<u-input
					:border="border"
					placeholder="请输入姓名"
					v-model="model.name"
					type="text"
				></u-input>
			</u-form-item>
			<u-form-item label="性别" prop="sex">
				<u-input
					:border="border"
					type="select"
					:select-open="actionSheetShow"
					v-model="model.sex"
					placeholder="请选择性别"
					@click="actionSheetShow = true"
				></u-input>
			</u-form-item>
			<!-- <u-form-item
				prop="idCardTypeCode"
				:leftIconStyle="{ color: '#888', fontSize: '32rpx' }"
				label-width="150"
				label="证件类别"
			>
				<u-input
					:border="border"
					:select-open="selectShow"
					placeholder="请选择证件类别"
					v-model="model.idCardTypeCode"
					type="select"
					@click="selectShow = true"
				></u-input>
			</u-form-item> -->
			<u-form-item
				prop="nationCode"
				:leftIconStyle="{ color: '#888', fontSize: '32rpx' }"
				label-width="150"
				label="民族"
			>
				<u-input
					:border="border"
					:select-open="nation"
					placeholder="请选择民族"
					v-model="model.nationCode"
					type="select"
					@click="nation = true"
				></u-input>
			</u-form-item>
			<u-form-item
				prop="personnelType"
				:leftIconStyle="{ color: '#888', fontSize: '32rpx' }"
				label-width="150"
				label="人员类型"
			>
				<u-input
					:border="border"
					:select-open="personnel"
					placeholder="请选择人员类型"
					v-model="model.personnelType"
					type="select"
					@click="personnelSelect"
				></u-input>
			</u-form-item>
			<view v-if="showAll">
				<u-form-item
					prop="multifetalType"
					:leftIconStyle="{ color: '#888', fontSize: '32rpx' }"
					label-width="150"
					label="多胎标记"
				>
					<u-input
						:border="border"
						:select-open="multifetal"
						placeholder="请选择多胎/单胎"
						v-model="model.multifetalType"
						type="select"
						@click="multifetal = true"
					></u-input>
				</u-form-item>
				<u-form-item
					prop="multpripleBirths"
					:leftIconStyle="{ color: '#888', fontSize: '32rpx' }"
					label-width="150"
					label="多胎产次"
				>
					<u-input
						:border="border"
						placeholder="请输入产次序列号"
						v-model="model.multpripleBirths"
						type="number"
					></u-input>
				</u-form-item>
			</view>
			<view v-if="showCard">
				<u-form-item
					:leftIconStyle="{ color: '#888', fontSize: '32rpx' }"
					label-width="150"
					label="身份证号"
					prop="identityCard"
				>
					<u-input
						:border="border"
						placeholder="请输入身份证号"
						v-model="model.identityCard"
						type="idcard"
					></u-input>
				</u-form-item>
			</view>

			<u-form-item
				:rightIconStyle="{ color: '#888', fontSize: '32rpx' }"
				right-icon="kefu-ermai"
				label="手机号码"
				prop="phone"
				label-width="150"
			>
				<u-input
					:border="border"
					placeholder="请输入手机号"
					v-model="model.phone"
					type="number"
				></u-input>
			</u-form-item>
			<view v-if="radioValue == 2">
				<view
					style="
						height: 30px;
						line-height: 30px;
						border: 1px solid;
						text-align: center;
						background: #ccc;
					"
					>监护人</view
				>
				<u-form-item
					:rightIconStyle="{ color: '#888', fontSize: '32rpx' }"
					label="姓名"
					prop="guardianName"
					label-width="150"
				>
					<u-input
						:border="border"
						placeholder="请输入监护人姓名"
						v-model="model.guardianName"
						type="number"
					></u-input>
				</u-form-item>
				<!-- <u-form-item
					:rightIconStyle="{ color: '#888', fontSize: '32rpx' }"
					label="手机号"
					prop="guardianPhone"
					label-width="150"
				>
					<u-input
						:border="border"
						placeholder="请输入监护人手机号"
						v-model="model.guardianPhone"
						type="number"
					></u-input>
				</u-form-item> -->
				<u-form-item
					:leftIconStyle="{ color: '#888', fontSize: '32rpx' }"
					label-width="150"
					label="身份证号"
					prop="guardianIdentityCard"
				>
					<u-input
						:border="border"
						placeholder="请输入监护人身份证号"
						v-model="model.guardianIdentityCard"
						type="idcard"
					></u-input>
				</u-form-item>
			</view>
		</u-form>
		<view class="agreement">
			<u-checkbox v-model="check" @change="checkboxChange"></u-checkbox>
			<view class="agreement-text"> 确认信息无误 </view>
		</view>
		<view v-if="userBthShow" style="margin-bottom: 40rpx">
			<u-button type="primary" :plain="true" @click="ImportInformation"
				>导入当前用户信息</u-button
			>
		</view>
		<u-button @click="submit">确认</u-button>
		<u-toast ref="uToast" />
		<view class="safe" id="safe"></view>
		<u-action-sheet
			:list="actionSheetList"
			v-model="actionSheetShow"
			@click="actionSheetCallback"
		></u-action-sheet>
		<!-- <u-select
			mode="single-column"
			:list="selectList"
			v-model="selectShow"
			@confirm="selectConfirm"
		></u-select> -->
		<u-select
			mode="single-column"
			:list="nationList"
			value-name="value"
			label-name="display"
			v-model="nation"
			@confirm="nationConfirm"
		></u-select>
		<!-- :default-value="defaultValue" -->
		<u-select
			mode="single-column"
			:list="personnelList"
			:default-value="defaultValue"
			v-model="personnel"
			@confirm="personnelConfirm"
		></u-select>
		<u-select
			mode="single-column"
			:list="multifetalList"
			v-model="multifetal"
			@confirm="multifetalConfirm"
		></u-select>

		<u-toast ref="uToast" />
	</view>
</template>

<script>
import { sysDataDictListType, register } from '../../http/api'
import { mapState } from 'vuex'
export default {
	data() {
		return {
			showAll: false,
			showCard: true,
			userBthShow: true,
			defaultValue: [0],
			model: {
				name: '',
				sex: '',
				phone: '',
				identityCard: '',
				nationCode: '',
				personnelType: '',
				multifetalType: '',
				multpripleBirths: '',
				guardianName: '',
				guardianPhone: '',
				guardianIdentityCard: '',
			},
			// 传递参数
			parameter: {
				nationCode: '',
				multifetalType: '',
				personnelType: '',
			},
			notarize: false,
			check: false,
			actionSheetShow: false,
			maritalSheetShow: false,
			selectShow: false,
			nation: false,
			personnel: false,
			multifetal: false,
			multpriple: false,
			actionSheetList: [
				{
					// 1
					value: '1',
					text: '男',
				},
				{
					// 2
					value: '2',
					text: '女',
				},
			],
			// 证件类别
			// selectList: [
			// 	{
			// 		value: 'd1',
			// 		label: '电子产品',
			// 	},
			// 	{
			// 		value: 'd2',
			// 		label: '服装',
			// 	},
			// 	{
			// 		value: 'd3',
			// 		label: '工艺品',
			// 	},
			// ],
			// 人员类型
			personnelList: [
				{ value: 1, label: '普通' },
				{ value: 2, label: '无证件儿童' },
			],
			// 多胎标记
			multifetalList: [
				{ value: 0, label: '单胎' },
				{ value: 1, label: '多胎' },
			],
			// 民族
			nationList: [],
			radioList: [
				{
					id: '1',
					name: '成人',
					checked: true,
					disabled: false,
				},
				{
					id: '2',
					name: '新生儿/儿童',
					checked: false,
					disabled: false,
				},
			],
			radioValue: '1',
			rules: {
				name: [
					{
						required: true,
						message: '请输入姓名',
						trigger: 'blur',
					},
				],
				guardianName: [
					{
						required: true,
						message: '请输入监护人姓名',
						trigger: 'blur',
					},
				],
				sex: [
					{
						required: true,
						message: '请选择性别',
						trigger: 'change',
					},
				],
				// idCardTypeCode: [
				// 	{
				// 		required: true,
				// 		message: '请选择证件类别',
				// 		trigger: 'change',
				// 	},
				// ],
				nationCode: [
					{
						required: true,
						message: '请选择民族',
						trigger: 'change',
					},
				],
				personnelType: [
					{
						required: true,
						message: '请选择人员类型',
						trigger: 'change',
					},
				],
				multifetalType: [
					{
						required: true,
						message: '请选择当前是否为单胎或多胎',
						trigger: 'change',
					},
				],
				multpripleBirths: [
					{
						required: true,
						message: '请输入当前产次序列号',
						trigger: 'change',
					},
				],
				phone: [
					{
						required: true,
						message: '请输入手机号',
						trigger: ['change', 'blur'],
					},
					{
						pattern:
							/^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[189]))\d{8}$/,
						message: '目前只支持中国大陆的手机号码',
						trigger: ['change', 'blur'],
					},
				],
				// guardianPhone: [
				// 	{
				// 		required: true,
				// 		message: '请输入监护人手机号码',
				// 		trigger: ['change', 'blur'],
				// 	},
				// 	{
				// 		pattern:
				// 			/^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[189]))\d{8}$/,
				// 		message: '目前只支持中国大陆的手机号码',
				// 		trigger: ['change', 'blur'],
				// 	},
				// ],
				identityCard: [
					{
						required: true,
						message: '请输入身份证号码',
						trigger: ['change', 'blur'],
					},
					{
						pattern:
							/^\d{6}((((((19|20)\d{2})(0[13-9]|1[012])(0[1-9]|[12]\d|30))|(((19|20)\d{2})(0[13578]|1[02])31)|((19|20)\d{2})02(0[1-9]|1\d|2[0-8])|((((19|20)([13579][26]|[2468][048]|0[48]))|(2000))0229))\d{3})|((((\d{2})(0[13-9]|1[012])(0[1-9]|[12]\d|30))|((\d{2})(0[13578]|1[02])31)|((\d{2})02(0[1-9]|1\d|2[0-8]))|(([13579][26]|[2468][048]|0[048])0229))\d{2}))(\d|X|x)$/,
						message: '请输入正确的身份证号',
						trigger: ['change', 'blur'],
					},
				],
				guardianIdentityCard: [
					{
						required: true,
						message: '请输入监护人身份证号码',
						trigger: ['change', 'blur'],
					},
					{
						pattern:
							/^\d{6}((((((19|20)\d{2})(0[13-9]|1[012])(0[1-9]|[12]\d|30))|(((19|20)\d{2})(0[13578]|1[02])31)|((19|20)\d{2})02(0[1-9]|1\d|2[0-8])|((((19|20)([13579][26]|[2468][048]|0[48]))|(2000))0229))\d{3})|((((\d{2})(0[13-9]|1[012])(0[1-9]|[12]\d|30))|((\d{2})(0[13578]|1[02])31)|((\d{2})02(0[1-9]|1\d|2[0-8]))|(([13579][26]|[2468][048]|0[048])0229))\d{2}))(\d|X|x)$/,
						message: '请输入正确的身份证号',
						trigger: ['change', 'blur'],
					},
				],
			},
			errorType: ['message'],
		}
	},
	onLoad() {
		this.tsysdatadictGet()
	},
	onReady() {
		this.$refs.uForm.setRules(this.rules)
	},
	computed: {
		...mapState({
			userId: state => state.userId,
			orgId: state => state.orgId,
			// 当前病人名称
			patientName: state => state.patientName,
			//性别
			patientGender: state => state.patientGender,
			// 身份证号
			patientIdentity: state => state.patientIdentity,
			// 手机号
			patientTelephone: state => state.patientTelephone,
		}),
	},
	methods: {
		tsysdatadictGet() {
			sysDataDictListType({
				type: 'RC_NATION_DICT',
			}).then(({ data }) => {
				console.log(data)
				this.nationList = data
				console.log(this.nationList)
			})
		},
		personnelSelect() {
			// this.defaultValue = []
			// this.defaultValue = [0]
			this.personnel = true
			console.log(this.defaultValue)
		},
		// 是否为新生儿
		radioGroupChange(e) {
			console.log(e)
			if (e == 2) {
				this.model.personnelType = ''
				this.parameter.personnelType = ''
				this.model.identityCard = ''
				this.showCard = false
			} else {
				this.showCard = true
			}
		},
		// 性别
		actionSheetCallback(index) {
			this.model.sex = this.actionSheetList[index].text
		},
		// 勾选确认
		checkboxChange(e) {
			console.log(e)
			this.notarize = e.value
		},
		// // 证件类别
		// selectConfirm(e) {
		// 	this.model.idCardTypeCode = e[0].label
		// 	this.parameter.idCardTypeCode = e[0].value
		// 	// console.log(this.idCardTypeCode)
		// },
		// 民族
		nationConfirm(e) {
			console.log(e, '民族')
			this.model.nationCode = e[0].label
			this.parameter.nationCode = e[0].value
		},
		// 人员类型
		personnelConfirm(e) {
			console.log(e)
			this.model.personnelType = ''
			this.parameter.personnelType = ''
			if (e[0].value == 2) {
				this.model.identityCard = ''
				this.model.multifetalType = ''
				this.model.multpripleBirths = ''
				this.parameter.multifetalType = ''
				this.rules.multifetalType[0].required = true
				this.rules.identityCard[0].required = false
				this.showAll = true
				this.showCard = false
				this.userBthShow = false
				this.defaultValue = [1]
			} else {
				this.model.identityCard = ''
				this.showAll = false
				this.showCard = true
				this.model.multifetalType = ''
				this.model.multpripleBirths = ''
				this.parameter.multifetalType = ''
				this.rules.multifetalType[0].required = false
				this.rules.identityCard[0].required = true
				this.userBthShow = true
				this.defaultValue = [0]
				console.log(this.rules.multifetalType[0].required)
			}
			// console.log(this.rules,'111')
			this.model.personnelType = e[0].label
			this.parameter.personnelType = e[0].value
		},
		// 多胎标记
		multifetalConfirm(e) {
			console.log(e[0].value, '多胎')
			// multpripleBirths
			if (e[0].value == 1) {
				this.rules.multpripleBirths[0].required = true
			} else {
				this.rules.multpripleBirths[0].required = false
			}
			this.model.multifetalType = e[0].label
			this.parameter.multifetalType = e[0].value
		},
		submit() {
			console.log(this.parameter.nationCode, '测试')
			// let canshu = {
			// 	name: this.model.name,
			// 	sex: this.model.sex == '男' ? '1' : '2',
			// 	idCardTypeCode: this.parameter.idCardTypeCode,
			// 	nation: this.parameter.nationCode,
			// 	personnelType: this.parameter.personnelType,
			// 	multifetalMark: this.parameter.multifetalType,
			// 	multpripleBirths: this.model.multpripleBirths,
			// 	idCode: this.model.identityCard,
			// 	phone: this.model.phone,
			// }
			// console.log(canshu, '123456789', this.parameter.personnelType)
			this.$refs.uForm.validate(valid => {
				if (valid) {
					if (!this.notarize) return this.$u.toast('请勾选协议')
					// console.log('新生儿正确！！！！！')
					// idCardTypeCode证件类别
					// nation民族
					// personnelType人员类型
					// multifetalMark多胎标记
					// multpripleBirths多胎产次
					let canshu = {
						userId: this.userId,
						orgId: this.orgId,
						name: this.model.name,
						sex: this.model.sex == '男' ? '1' : '2',
						idCardTypeCode: '01',
						nation: this.parameter.nationCode,
						personnelType: this.parameter.personnelType,
						multifetalMark: this.parameter.multifetalType,
						multpripleBirths: this.model.multpripleBirths,
						idCode: this.model.identityCard,
						phone: this.model.phone,
						motherName: this.model.guardianName,
						motherIdCode: this.model.guardianIdentityCard,
					}
					register(canshu).then(({ data, head }) => {
						console.log(data)
						if (head.code == 200) {
							this.$refs.uToast.show({
								title: '设置成功',
								type: 'success',
								url: '/pages/healthCard/index',
								duration: 1000,
							})
						}
					})
					console.log(canshu, '123456789')
				} else {
					console.log('验证失败')
				}
			})
		},
		// 导入当前用户信息
		ImportInformation() {
			this.model.name = this.patientName
			this.model.sex = this.patientGender == 1 ? '男' : '女'
			this.model.identityCard = this.patientIdentity
			this.model.phone = this.patientTelephone
			this.model.personnelType = '普通'
			this.parameter.personnelType = 1
			if (this.patientIdentity) {
				this.showAll = false
				this.showCard = true
				this.model.multifetalType = ''
				this.model.multpripleBirths = ''
				this.parameter.multifetalType = ''
				this.rules.multifetalType[0].required = false
				this.rules.identityCard[0].required = true
				this.userBthShow = true
			} else {
				this.model.identityCard = ''
				this.model.multifetalType = ''
				this.model.multpripleBirths = ''
				this.parameter.multifetalType = ''
				this.rules.multifetalType[0].required = true
				this.rules.identityCard[0].required = false
				this.userBthShow = false
				this.showAll = true
				this.showCard = false
			}
		},
	},
}
</script>

<style lang="scss">
page {
	padding: 10rpx 40rpx;
}
.agreement {
	display: flex;
	align-items: center;
	margin: 40rpx 0;

	.agreement-text {
		padding-left: 8rpx;
		color: $u-tips-color;
	}
}
.safe {
	height: 0;
	height: constant(safe-area-inset-bottom);
	height: env(safe-area-inset-bottom);
}
</style>